<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>办公</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style type="text/css">
    .cell {
        height: 130px;
        text-align: center;
        padding-top: 15px;
    }
    
    img {
        width: 75px;
        height: 75px;
    }
    
    p {
        margin-top: 5px;
        font-size: 14px;
        color: black;
        font-weight: lighter;
    }
    </style>
</head>

<body>
    <div class="page-group">
        <div class="page page-current">
            <div class="content" id="content"></div>
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="js/apply.js?version=2016053101"></script>
    <script type="text/javascript" src='js/common.js?version=1.0'></script>
    <script type="text/javascript">
    //获取模块
    var moduleUrl = requestBaseUrl + "companies/app/h5/modules";
    $.ajax({
        url: moduleUrl,
        type: 'GET',
        headers: {
            'Authorization': 'Bearer ' + getToken()
        },
        success: function(response) {
            console.log('获取到模块：\n' + formatJSON(JSON.stringify(response)));
            if (response.status == 10001) {
                showModules(response.data);
            } else {
                $.toast('获取模块出错' + response.status);
            }
        },
        error: function(jqXHR, status, errorThrown) {
            $.toast('获取模块出错' + jqXHR.status);
        }
    })

    //显示模块
    function showModules(modules) {
        var html = '<div class="content-padded grid-demo"><div class="row">';
        var menu;
        for (var i = 0; i < modules.length; i++) {
            menu = modules[i];
            html += getMenuHtml(menu.icon, menu.name, menu.url);
        }
        html += '</div></div>';
        $('#content').html(html);
        addClickAndTouchOperation();
        showOrHideTakeSample();
    }

    //获取角色信息并显示或隐藏采样功能
    function showOrHideTakeSample() {
        var role = getRole();
        if (role == 1 || role == 2) {
            console.log('show take sample');
            $('#take-sample').show();
        } else {
            $('#take-sample').hide();
            console.log('hide take sample');
        }
    }

    //给模块添加点击事件处理
    function addClickAndTouchOperation() {
        //处理菜单点击事件
        $('div.cell').click(function() {
            var detailUrl = $(this).find('span').text();
            if (!isEmpty(detailUrl)) {
                if (detailUrl.indexOf('http://') == 0) {
                    openWindow(detailUrl);
                } else if (detailUrl.indexOf('window.js_interface') == 0) {
                    if (window.js_interface) {
                        try {
                            eval(detailUrl); //js调用本地方法
                        } catch (e) {
                            console.log(e.toString());
                            $.alert('请在工厂宝APP上使用本功能，或者升级工厂宝APP到最新版本。', '提示');
                        }
                    } else {
                        $.alert('请在工厂宝APP上使用本功能，或者升级工厂宝APP到最新版本。', '提示');
                    }
                } else {
                    $.toast('error! no detail!');
                }
            }
        })

        //菜单按下时添加背景颜色
        $('.cell').bind('touchstart', function() {
            $(this).css('background-color', '#dcdcdc');
        });

        //菜单不被按下时取消背景颜色
        $('.cell').bind('touchend', function() {
            $(this).css('background-color', '');
        });
    }

    //根据菜单的图片url、菜单标题、跳转url，生成一个菜单DOM
    function getMenuHtml(picUrl, title, detailUrl) {
        var str = '';
        if(title == '人脸采样') {
            str = '<div class="col-33 cell" id="take-sample">';
        }else{
            str = '<div class="col-33 cell">';
        }
        str += '<a href="#" id="menu-machine">';
        str += '<span hidden>' + detailUrl + '</span>';
        str += '<img src="' + picUrl + '">';
        str += '<p>' + title + '</p>';
        str += '</a>';
        str += '</div>';
        return str;
    }
    </script>
</body>

</html>
<!--
